<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>浮点流觞房产信息平台 -租房</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="zhuye.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body class="bg-gray-100 font-sans">

<header>
    <div id="dio">
        <div class="top-bar">
            <div class="logo-container">
                <!-- <img src="logo.jpg" alt="logo"> -->
                <span class="logo-text">浮点流觞</span>
            </div>
            <div class="sub-nav">
                <a href="#">个人中心</a>
                <a href="#">商家中心</a>
                <a href="#">帮助中心</a>
                <a href="javascript:;" @click="xianshikefu">在线客服</a>
                <a href="denglu.html" class="register-item">登录</a>
                <a href="zhuce.html" class="register-item">注册</a>
            </div>
        </div>

        <!--智能客服对话框-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="问题" label-width="200px">
                    <el-input v-model="form.ask" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="答案" label-width="200px">
                    <el-input v-model="form.que" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="deepseek">提 问</el-button>
            </div>
        </el-dialog>
    </div>


</header>

<nav class="category-nav">
    <a href="zufang.html" class="category-item">租房</a>
    <a href="ershoufang.html" class="category-item">二手房</a>
    <a href="xinfang.html" class="category-item">新房</a>
    <a href="#" class="category-item">商铺</a>
    <a href="#" class="category-item">生意转让</a>
    <a href="#" class="category-item">写字楼</a>
    <a href="#" class="category-item">厂房</a>
    <a href="#" class="category-item">仓库</a>
    <a href="#" class="category-item">土地</a>
    <a href="#" class="category-item">车位</a>
</nav>

<div id="fangdongxinxi" class="bg-white p-6 rounded shadow-md">

    <!-- 省略其他按钮代码 -->

    <div class="mt-4">
        <p v-for="e in list" :key="e.id" class="border-b border-gray-300 py-2">
            {{e.fangyuanbiaoti}}
            <button @click="rentHouse(e.id)" class="bg-green-500 text-white px-2 py-1 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 ml-2"><a href="hetong.html">租房</a></button>
        </p>
    </div>
    <div class="mt-4">
        <p v-for="e in cheapestList" :key="e.id" class="border-b border-gray-300 py-2">
            {{e.fangyuanbiaoti}}
            <button @click="rentHouse(e.id)" class="bg-green-500 text-white px-2 py-1 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 ml-2">租房</button>
        </p>
    </div>
    <div class="mt-4">
        <p v-for="e in newestList" :key="e.id" class="border-b border-gray-300 py-2">
            {{e.fangyuanbiaoti}}
            <button @click="rentHouse(e.id)" class="bg-green-500 text-white px-2 py-1 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 ml-2">租房</button>
        </p>
    </div>
</div>
<div class="container mx-auto px-4 py-8">
    <!-- 省略其他部分代码 -->
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    // 省略其他Vue实例代码

    new Vue({
        el: '#fangdongxinxi',
        data: {
            list: [],
            cheapestList: [],
            newestList: []
        },
        mounted() {
            this.getHouseInfo();
        },
        methods: {
            getHouseInfo() {
                axios({
                    url: 'http://localhost:8888/fangwujibenxinxi/fangyuan',
                    method: 'get'
                }).then(resp => {
                    if (resp.data.success) {
                        this.list = resp.data.data;
                    } else {
                        console.error('获取房源信息失败，原因:', resp.data.message);
                    }
                }).catch(error => {
                    console.error('获取房源信息出错:', error);
                });
            },
            clearHouseInfo() {
                this.list = [];
            },
            getCheapestHouseInfo() {
                axios({
                    url: 'http://localhost:8888/fangwujibenxinxi/zuipianyifangyuan',
                    method: 'get'
                }).then(resp => {
                    if (resp.data.success) {
                        this.cheapestList = resp.data.data;
                    } else {
                        console.error('获取最便宜房源信息失败，原因:', resp.data.message);
                    }
                }).catch(error => {
                    console.error('获取最便宜房源信息出错:', error);
                });
            },
            clearCheapestHouseInfo() {
                this.cheapestList = [];
            },
            getNewestHouseInfo() {
                axios({
                    url: 'http://localhost:8888/fangwujibenxinxi/zuixinfangyuan',
                    method: 'get'
                }).then(resp => {
                    if (resp.data.success) {
                        this.newestList = resp.data.data;
                    } else {
                        console.error('获取最新房源信息失败，原因:', resp.data.message);
                    }
                }).catch(error => {
                    console.error('获取最新房源信息出错:', error);
                });
            },
            clearNewestHouseInfo() {
                this.newestList = [];
            },
            rentHouse(houseId) {
                // 这里编写租房的逻辑，比如发送租房请求到后端
                axios({
                    url: `http://localhost:8888/fangwujibenxinxi/fangyuan/${houseId}`,
                    method: 'post'
                }).then(resp => {
                    if (resp.data.success) {
                        console.log('租房操作成功');
                        // 可以在这里添加成功后的操作，比如刷新页面或者提示用户
                    } else {
                        console.error('租房操作失败，原因:', resp.data.message);
                    }
                }).catch(error => {
                    console.error('租房操作出错:', error);
                });
            }
        }
    });

    // 省略其他Vue实例代码

</script>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#dio',
        data: {
            dialogFormVisible: false,
            form: {
                ask: '',
                que: ''
            }
        },
        methods: {
            xianshikefu() {
                this.dialogFormVisible = true
            },
            deepseek() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/deepseek/kefu',
                    params: {
                        wenti: this.form.ask
                    }
                }).then(resp => {
                    this.form.que = resp.data
                })
            }
        }

    })
</script>